<!-- 商品页面 -->
<template>
	<view class="content">
		<!-- 筛选弹窗 -->
		<u-popup v-model="shows01" mode="bottom"
		 :safe-area-inset-bottom="true" :closeable="true">
			<view class="flsx">
				<view class="flsx-title">
					分类筛选
				</view>
				<!-- 分类列表 -->
				<view class="flsx-list">
					<view v-for="(item,index) in sxlixt" :key="index" @click="flxu(item.id)"
						:class=" listParams.tag_id == item.id ? 'acsx u-line-1':'' "
					>
						{{item.name}}
					</view>
					
					<!-- 解决弹性盒子布局问题 -->
					<view class="" style="height: 0;">
						
					</view>
					
				</view>
				<!-- 确定重置 -->
				<view class="flsx-botton">
					<view class="flsx-botton-1" @click="tabClick()">
						确定
					</view>
					<view class="flsx-botton-2" @click="listParams.tag_id=''">
						重置
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 搜索框 -->
		<view class="sskx">
			<view class="ssk">
				<input @change="onSearch" v-model="searchVal" type="text" value="" placeholder="请输入关键词搜索" />
				<view>
					<u-icon @click="onSearch"  color="#ffffff" size="29" name="search"></u-icon>
				</view>
			</view>
		</view>		
		<!-- 商品筛选 -->
		<view class="spsx">
				<view  v-for="(item,index) in spsx" :key="index" 
					:class="sxActive == index?'active':''"
					@click="tabClick(index)"
				>
					{{item.name}}
				</view>
				<view class="c100">
					<view class="" @click="tabClick(3)">
						价格
					</view>
					<view class="" style="display: flex;flex-direction: column;">
						<u-icon name="arrow-up-fill" :color="priceOrder === 1 && sxActive === 3 ? '#FF9A33' : '#333'" size="18"></u-icon>
						<u-icon name="arrow-down-fill" :color="priceOrder === 2 && sxActive === 3 ? '#FF9A33' : '#333'" size="18"></u-icon>
					</view>
				</view>
				<view class="">
					<view @click="listType = 1" v-if="listType == 0">
						<image style="width: 33rpx ;height: 33rpx;position: relative;
						top: 3rpx;
						" src="https://s1.ax1x.com/2022/03/30/qgXppd.png" mode=""></image>
						
					</view>
					<view @click="listType = 0" v-if="listType == 1" >
						<image style="width: 33rpx ;height: 33rpx;position: relative;
						top: 3rpx;
						" src="https://s1.ax1x.com/2022/03/30/qgLmVS.png" mode=""></image>
					</view>
				</view>
				<view class="sai" @click="siaxuan">
					筛选 <image src="https://s1.ax1x.com/2022/07/12/jgdgv4.png" mode=""></image>
				</view>
		</view>
		
		<!-- 列表 -->
		<view class="contents">
			<!-- 表格布局 -->
			<view class="bgbj">
				<view :class="listType == 0 ?'bgbjitem':'bgbjitem-heng'" v-for="(item,index) in goodsList "
				 @click="$Router.push({ path: '/pages/product/product-xq', query: { id: item.id } })"
				 :key="index">
					<view class="bgbjitemimg">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view class="bgbjitem-xian"></view>
					<view class="bgbjitem-bottom">
						<view class="bgbjitem-title u-line-1">{{item.title}}</view>
						<view class="bgbjitem-des u-line-1">{{item.subtitle}}</view>
						<view class="bgbjitem-price">
							<text>¥</text>{{item.price}}
						</view>
						<view class="bgbjitem-buy">购买</view>
					</view>
					
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				// 筛选列表
				sxlixt:[],
				shows01:false,
				// 结束
				listType:1,
				id:0,//传过来的id值
				sxActive:0,
				spsx:[
					{
						name:"综合",
					},
					{
						name:"销量"
					},
					{
						name:"新品"
					}
				],
				showSel: false, //综合选择
				defaultOrder: 0, //综合
				priceOrder: 0, //价格
				salesOrder: 0, //销量
				newProdcutOrder: 0, //新品优先
				splidt:[],//商品列表
				isEmpty: false,
				goodsList: [],
				searchVal: '',
				listParams: {
					category_id: 0,
					keywords: '',
					page: 1,
					tag_id:''
				},
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 1,
				
				// 瀑布流 350-330
				addTime: 100, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: []
			}
		},
		computed: {
			...mapGetters(['authType','isLogin']),
			filterData() {
				const data = {
					defaultOrder: this.defaultOrder,
					priceOrder: this.priceOrder,
					salesOrder: this.salesOrder,
					newProdcutOrder: this.newProdcutOrder
				};
				return data;
			}
		},
		onShow() {
				if(this.isLogin){
					this.getCartList()
				}
				
				this.getsaixuan()
		},
		onLoad() {
			this.lastPage=1
			this.listParams.page=1
			this.goodsList=[]
			console.log('show',uni.getStorageSync('commodityId'))
			if (uni.getStorageSync('commodityId')) {
				this.listParams.category_id = uni.getStorageSync('commodityId');
				this.getGoodsList();
				uni.removeStorageSync('commodityId')
			} else if (this.$Route.query.hasOwnProperty('keywords')) {
				this.listParams.keywords = this.$Route.query.keywords;
				this.searchVal = this.$Route.query.keywords;
				!this.$Route.query.keywords && this.getGoodsList();
			} else {
				this.getGoodsList();
			}
		},
		onHide() {
			
		},
		// 触底加载更多
		onReachBottom() {
			if (this.listParams.page < this.lastPage) {
				this.listParams.page += 1;
				this.getGoodsList();
			}
		},
		//点击刷新当前页面
		onTabItemTap : function(e) {
			console.log(e,'2222222222')
			// this.getsp(0)
		},
		methods: {
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			// //跳转商品详情
			// xq(idxq){
			// 	uni.navigateTo({
			// 		url:"../product/product-xq?id="+idxq
			// 	})
			// },
			//点击每个分类
			flxu(id){
				let _this=this
				_this.listParams.tag_id=id
			},
			// 筛选
			siaxuan(){
				this.shows01=true
				console.log(this.shows01)
			},
			// 获取筛选列表
			getsaixuan(){
				let that= this
				that.$http('common.lix', {
					
				}).then(res => {
					that.sxlixt=res.code
					console.log("获取赛选 列表")
					console.log(res)
					console.log("获取赛选 列表")
					
				});
			},
			// 结束
			// 键盘搜索,输入搜索
			onSearch() {
				this.goodsList = [];
				this.listParams.page = 1;
				this.lastPage = 1;
				this.listParams.keywords = this.searchVal;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},
			tabClick(index) {
				this.shows01 = false
				this.sxActive = index;
				index === 0 ? (this.showSel = !this.showSel) : (this.showSel = false);
				index === 1 ? (this.salesOrder = 1) : (this.salesOrder = 0);
				index === 3 ? (this.priceOrder = this.priceOrder === 1 ? 2 : 1) : (this.priceOrder = 0);
				index === 2 ? (this.newProdcutOrder = 1) : (this.newProdcutOrder = 0);
				console.log(this.filterData)
				this.listParams.order = this.filterData;
				this.goodsList = [];
				this.listParams.page = 1;
				this.lastPage = 1;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},
			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},
			// 商品列表
			getGoodsList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('goods.lists', that.listParams, '加载中...').then(res => {
					if (this.searchVal && !historyTag.includes(this.searchVal)) {
						let searchHistoryArr = JSON.stringify(this.getArr(historyTag, this.searchVal));
						uni.setStorageSync('searchHistoryArr', searchHistoryArr);
					}
					if (res.code === 1) {
						that.goodsList = [...that.goodsList, ...res.data.data];
						that.isEmpty = !that.goodsList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.listParams.page < res.data.last_page ? 'loadmore' : 'nomore';
						that.tempList = res.data.data;
						// that.splitData();
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.acsx{
		background: #FF9A33 !important;
		color: #FFFFFF !important;
	}
	.flsx-botton{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;
	}
	.flsx-botton>view{
		width: 279rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
	.flsx-botton-1{
		background: #FF9A33;
		border-radius: 40px 0px 0px 40px;
	}
	.flsx-botton-2{
		background: #FFCD00;
		border-radius: 0px 40px 40px 0px;
	}
	.flsx-list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.flsx-list>view{
		width: calc(100% / 3.3);
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		background: #F6F6F6;
		border-radius: 33rpx;
		padding: 0 15rpx;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;		
	}
	.flsx-title{
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #7C7C7C;
		margin-bottom: 80rpx;
	}
	.flsx{
		padding: 39rpx 30rpx 73rpx;
	}
	.sai{
		display: flex;
		align-items: center;
	}
	.sai image{
		width: 30rpx;
		height: 34rpx;
		margin-left: 5rpx;
	}
	// 结束
	
	
	input{
		font-size: 26rpx;
		font-weight: 400;
		color: #4C4A4A;
	}
	.active{
		color: #FF9A33 !important;
	}
	.contents {
		padding-top: 10rpx;
	}
	.sskx{
		padding: 20rpx 0;
	}
	.content{
		background-color: #F6F6F6;
	}
	.ssk{
		width: 600rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #D6D7DC;
		border-radius: 30rpx;
		margin: 0 auto ;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ssk>view{
		width: 100rpx;
		height: 100%;
		background: #FF9A33;
		border: 1rpx solid #D6D7DC;
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ssk>view /deep/ text{
		margin: 0 auto;
	}
	.ssk>input{
		width:calc(80% - 40rpx);
		padding: 0 20rpx;
		border: none;
		outline: none;
		height: 100%;
	}
	.spsx{
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx 0;
	}
	.spsx>view{
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	.c100>view{
		margin-right: 4rpx;
	}
	.bgbj{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.bgbjitem{
		width: 340rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.bgbjitemimg{
		text-align: center;
	}
	.bgbjitem{
		position:relative;
		.bgbjitemimg{
			width: 100%;
			height: 270rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.bgbjitem-xian{
			width: 80%;
			height: 2px;
			background: linear-gradient(90deg, #FFFFFF, #F28101, #FFFFFF);
			border-radius: 1px;
			margin: 0 auto;
			margin-top: 10rpx;
		}
		.bgbjitem-bottom{
			padding: 30rpx 20rpx;
			// padding-bottom: 30rpx;
			box-sizing: border-box;
			.bgbjitem-title{
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 19rpx;
			}
			.bgbjitem-des{
				color: #7C7C7C;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}
			.bgbjitem-price{
				font-size: 36rpx;
				color: #FF9A33;
				font-weight: 800;
				text{
					font-size: 24rpx;
				}
			}
			
		}
	}
	.bgbjitem-buy{
		width: 90rpx;
		height: 44rpx;
		border: 1px solid #FF9A33;
		border-radius: 30rpx 0px 10rpx 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #FF9A33;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.bgbjitem-heng{
		width: 100%;
		display: flex;
		align-items: center;
		background: #FFFFFF;
		margin-bottom: 20rpx;
		position: relative;
		.bgbjitemimg{
			width: 250rpx;
			height: 245rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.bgbjitem-xian{
			width: 2rpx;
			height: 237rpx;
			background: linear-gradient(0deg, #FFFFFF, #F28101, #FFFFFF);
			border-radius: 1px;
			margin-right: 49rpx;
			margin-left: 10rpx;
		}
		.bgbjitem-title{
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 19rpx;
		}
		.bgbjitem-des{
			font-size: 24rpx;
			color: #7C7C7C;
			margin-bottom: 20rpx;
		}
		.bgbjitem-price{
			font-size: 36rpx;
			color: #FF9A33;
			font-weight: 800;
			text{
				font-size: 24rpx;
			}
		}
	}
	.bgbjitem-heng>view:last-of-type{
		width: 370rpx;
	}
</style>
